<template>
  <div id="imgbghxjdt"></div>
</template>

<script>
import { defineComponent, ref, onMounted, computed, nextTick } from "vue";
export default defineComponent({
  name: "Imgbghxjdt",
});
</script>
<script setup>
import * as echarts from "echarts";

nextTick(() => {
  let dom = document.getElementById("imgbghxjdt");
  let myChart = echarts.init(dom);

  const data = [
    {
      name: "政务服务事项满意度",
      value: 90,
    },
  ];
  let option = {
    backgroundColor: "#123756",
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image:
              "",
            width: 100,
            height: 100,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    title: [
      {
        text: data[0].value + "%",
        textStyle: {
          color: "white",
          fontSize: 20,
        },
        left: "center",
        top: "center",
      },
      {
        text: data[0].name,
        x: "center",
        y: 650,
        textStyle: {
          color: "#fff",
          fontSize: 35,
          fontweight: 400,
        },
      },
    ],
    color: [
      new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        {
          offset: 0,
          color: "rgba(0, 255, 240, 1)",
        },
        {
          offset: 1,
          color: "rgba(45, 85, 227, 1)",
        },
      ]),
      "transparent",
      "transparent",
    ],
    series: [
      {
        name: "办结率",
        type: "pie",
        radius: ["72%", "80%"],
        center: ["49%", "49.8%"],
        startAngle: 275,
        itemStyle: {
          normal: {
            opacity: 1,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 5,
            shadowOffsetX: 5,
            shadowOffsetY: 1,
          },
        },
        data: [
          ...data,
          {
            label: "占位",
            value: 50,
          },
        ],
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#imgbghxjdt {
  width: 100px;
  height: 100px;
  background: white;
}
</style>
